
import React, { useEffect, useRef, useState } from 'react'
import style from "./index.module.scss"

interface PROPS {
    toc: any
}
interface TOCINTM {
    level: string
    id: string
    text: string

}
export const Toc = (props: PROPS) => {
    const [active, setActive] = useState(0)
    const ref = useRef()
    //抛锚
    const toPageScroll = (item: TOCINTM) => {
        const el = document.getElementById(item.id)
        console.log(document.getElementById(item.id))
        el?.scrollIntoView()
    }
    return (
        <div className={style["toc"]}>
            <h2>目录</h2>
            <div>
                {props.toc && props.toc.map((item: TOCINTM, index: number) => {
                    return <div
                        className={index == active ? "oo" : ""}
                        id={item.id}
                        style={
                            {
                                "paddingLeft": 20 * (item.level as any),
                                lineHeight: 2,
                                fontSize: "15px",
                                "cursor": "pointer"
                            }
                        }
                        onClick={() => { toPageScroll(item); setActive(index) }}
                    >{item.text}</div>
                })}
            </div>
        </div>
    )
}



export default Toc